<template>
    <h2>团队分工</h2>
    <table>
      <thead>
        <tr>
          <th>姓名</th>
          <th>负责模块</th>
          <th>具体任务</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(member, index) in team" :key="index">
          <td>{{ member.name }}</td>
          <td>{{ member.module }}</td>
          <td>{{ member.task }}</td>
        </tr>
      </tbody>
    </table>
</template>

<script setup>
import { reactive } from 'vue';

const team = reactive([
  { name: "谢金", module: "管理员模块", task: "用户权限管理、商家审核、订单监控" },
  { name: "杨盼", module: "用户模块", task: "用户注册、登录、购物车管理、订单生成" },
  { name: "梁晶", module: "商家模块", task: "商品发布、库存管理、订单处理、退款管理" }
]);
</script>

<style>
.team-division {
  width: 80%;
  margin: 20px auto;
  padding: 20px;
  border: 1px solid #ddd;
  border-radius: 8px;
  background-color: #f9f9f9;
}

h2 {
  color: #555;
}

table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 10px;
}

th, td {
  border: 1px solid #ddd;
  padding: 10px;
  text-align: left;
}

th {
  background-color: #f2f2f2;
}
</style>